
var chartMapDom = document.getElementById('map');
var mapChart = echarts.init(chartMapDom);
var option;

const data = $.parseJSON($('#stationlist').val());
const geoCoordMap = $.parseJSON($('#geo').val());;
const convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};
option = {
    title: {

    },
    tooltip: {
        trigger: 'item'
    },
    bmap: {
        center: [108.114129, 30.550339],
        zoom: 6,
        roam: true,
        mapStyle: {
            styleJson: [
                {
                    featureType: 'land',
                    elementType: 'all',
                    stylers: {
                        color: '#f3f3f3'
                    }
                },
                {
                    featureType: 'railway',
                    elementType: 'all',
                    stylers: {
                        visibility: 'on'
                    }
                },
                {
                    featureType: 'highway',
                    elementType: 'all',
                    stylers: {
                        color: '#fdfdfd'
                    }
                },
                {
                    featureType: 'highway',
                    elementType: 'labels',
                    stylers: {
                        visibility: 'off'
                    }
                },
                {
                    featureType: 'arterial',
                    elementType: 'geometry',
                    stylers: {
                        color: '#fefefe'
                    }
                },
                {
                    featureType: 'arterial',
                    elementType: 'geometry.fill',
                    stylers: {
                        color: '#fefefe'
                    }
                },
                {
                    featureType: 'poi',
                    elementType: 'all',
                    stylers: {
                        visibility: 'off'
                    }
                },
                {
                    featureType: 'green',
                    elementType: 'all',
                    stylers: {
                        visibility: 'off'
                    }
                },
                {
                    featureType: 'subway',
                    elementType: 'all',
                    stylers: {
                        visibility: 'off'
                    }
                },
                {
                    featureType: 'manmade',
                    elementType: 'all',
                    stylers: {
                        color: '#d1d1d1'
                    }
                },
                {
                    featureType: 'local',
                    elementType: 'all',
                    stylers: {
                        color: '#d1d1d1'
                    }
                },
                {
                    featureType: 'arterial',
                    elementType: 'labels',
                    stylers: {
                        visibility: 'off'
                    }
                },
                {
                    featureType: 'boundary',
                    elementType: 'all',
                    stylers: {
                        color: '#fefefe'
                    }
                },
                {
                    featureType: 'building',
                    elementType: 'all',
                    stylers: {
                        color: '#d1d1d1'
                    }
                },
                {
                    featureType: 'label',
                    elementType: 'labels.text.fill',
                    stylers: {
                        color: '#999999'
                    }
                }
            ]
        }
    },
    series: [
        {
            name: '电桩数',
            type: 'scatter',
            coordinateSystem: 'bmap',
            data: convertData(data),
            symbolSize: function (val) {
                return val[2];
            },
            encode: {
                value: 0
            },
            label: {
                formatter: '{b}',
                position: 'right',
                show: false
            },
            emphasis: {
                label: {
                    show: true
                }
            }
        },
        {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            data: convertData(
                data
                    .sort(function (a, b) {
                        return b.value - a.value;
                    })
                    .slice(0, 6)
            ),
            symbolSize: function (val) {
                return 20;
            },
            encode: {
                value: 2
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            
            itemStyle: {
                shadowBlur: 1,
                shadowColor: '#333',
                color:'blue'
            },
            emphasis: {
                scale: true
            },
            zlevel: 1
        }
    ]
};

option && mapChart.setOption(option);